<!DOCTYPE html>
 <html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <style type="text/css">
         .block {
            background-color: #ccc;
            padding: 1em;
            margin: 1em;
         }
      </style>

      <!-- include AutobahnJS .. that's all you need -->
      <script src="http://autobahn.s3.amazonaws.com/js/autobahn.min.js"></script>

      <script>
         var sess = null;

         window.onload = function() {

            // connect to WAMP server
            ab.connect("ws://localhost:9000",

               // WAMP session was established
               function (session) {

                  sess = session;
                  console.log("Connected!");

                  // establish a prefix, so we can abbreviate procedure URIs ..
                  sess.prefix("keyvalue", "http://example.com/simple/keyvalue#");
               },

               // WAMP session is gone
               function (code, reason) {

                  sess = null;
                  alert(reason);
               }
            );
         };

         function setKeyValue() {

            var k = document.getElementById('form_key').value;
            var v1 = document.getElementById('form_value1').value;
            var v2 = document.getElementById('form_value2').value;
            var v3 = document.getElementById('form_value3').checked;

            sess.call("keyvalue:set",
                      k,
                      {value1: v1,
                       value2: v2,
                       value3: v3,
                       modified: new Date()}).then(function () {
               console.log("ok, value set");
            });
         }

         function getValue() {

            var k = document.getElementById('form_key').value;

            sess.call("keyvalue:get", k).then(function (val) {
               console.log("ok, got value");
               document.getElementById('form_value1').value = val.value1;
               document.getElementById('form_value2').value = val.value2;
               document.getElementById('form_value3').checked = val.value3;
            });
         }

         function deleteKey() {

            var k = document.getElementById('form_key').value;

            sess.call("keyvalue:set", k).then(function () {
               console.log("ok, key gone");
            });
         }

         function getAll() {
            sess.call("keyvalue:get").then(console.log);
         }

         function deleteAll() {
            sess.call("keyvalue:set").then(console.log);
         }
     </script>
   </head>
   <body>

      <h1>Autobahn: Remote Key-Value Store with WAMP RPCs</h1>

      <div class="block"><button onclick="getAll()">Get all</button> Retrieve all key-value pairs from store and log to console.</div>
      <div class="block"><button onclick="deleteAll()">Delete all</button> Delete all data from store.</div>
      <div class="block">
         <form>
            <p>Key: <input id="form_key" type="text" size="50" maxlength="50"></p>
            <p>Value 1: <input id="form_value1" type="text" size="50" maxlength="50"></p>
            <p>Value 2: <input id="form_value2" type="text" size="50" maxlength="50"></p>
            <p>Value 3: <input id="form_value3" type="checkbox"></p>
         </form>
         <p><button onclick="setKeyValue()">Set Value</button> Set key-value pair.</p>
         <p><button onclick="deleteKey()">Delete Key</button> Delete key-value by key.</p>
         <p><button onclick="getValue()">Get Key</button> Get key-value by key.</p>
      </div>

   </body>
 </html>
